<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main {
            padding-top: 6px;
        }
        .main ul li {
            margin-bottom: 6px;
        }
        .li_box {
            background-color: #fff;
            padding: 15px;
        }
        .li_box .li_boxt {
            margin-bottom: 12px;
        }
        .li_box .li_boxt .info_box {
            padding-right: 5px;
        }
        .li_box .li_boxt .info_box .title {
            color: #333;
            font-size: 16px;
            margin-bottom: 9px;
        }
        .li_box .li_boxt .info_box .info {
            color: #999;
            font-size: 12px;
        }
        .li_box .li_boxb .address_box {
            display: -webkit-box;
            display: -webkit-flex;
            padding-bottom: 5px;
        }
        .li_box .li_boxb .address_box .address_boxl {
            padding-right: 5px;
        }
        .li_box .li_boxb .address_box .address_boxl img {
            width: 18px;
            display: block;
        }
        .li_box .li_boxb .address_box .address_boxr {
            width: 0;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
        }
        .li_box .li_boxb .address_box .address_boxr .address {
            font-size: 13px;
            color: #333;
        }
        .li_box .li_boxb .address_box .address_boxr .phone {
            font-size: 12px;
            color: #999;
            margin-top: 9px;
        }
        .li_box .li_boxb .address_box .address_boxr .address_detail {
            font-size: 12px;
            color: #999;
            margin-top: 9px;
        }
        .btn_div {
            overflow: hidden;
            padding-top: 10px;
        }
        .btn_box {
            float: right;
            background-color: #fff;
            overflow: hidden;
        }
        .btn_box .btn {
            width: 67px;
            height: 22px;
            line-height: 22px;
            float: left;
            text-align: center;
            background-color: #fff;
            border-radius: 5px;
            font-size: 12px;
            margin-right: 10px;
            border: 1px solid #999;
            color: #333;
        }
        .btn_box .btn:last-child {
            margin-right: 0;
        }
        .btn_box .btn.contact {
            color: #40afe2;
        }
        .btn_box .btn.route {
            color: #1abc5e;
        }
        .btn_box .btn.confirm {
            color: #e62442;
            border-color: #e62442;
        }
    </style>
</head>
<body>
    <div class="main">
        <ul id="orderC">
            <!-- <li>
                <div class="li_box">
                    <div class="li_boxt">
                        <div class="info_box">
                            <div class="title">商家名称</div>
                            <div class="info">距离0.43km | 配送费 6</div>
                        </div>
                    </div>
                    <div class="li_boxb">
                        <div class="address_box">
                            <div class="address_boxl">
                                <img src="../image/merchant_address.png">
                            </div>
                            <div class="address_boxr">
                                <div class="address">商家地址</div>
                            </div>
                        </div>
                        <div class="address_box">
                            <div class="address_boxl">
                                <img src="../image/client_address.png">
                            </div>
                            <div class="address_boxr">
                                <div class="address">客户地址</div>
                                <div class="phone">联系电话：13333333333</div>
                                <div class="address_detail">北京市海淀区龙翔路泰翔商务区508室</div>
                            </div>
                        </div>
                    </div>
                    <div class="btn_div">
                        <div class="btn_box">
                            <div class="btn contact">联系</div>
                            <div class="btn route">路线</div>
                            <div class="btn confirm">确认送达</div>
                        </div>
                    </div>
                </div>
            </li> -->
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script id="orderL" type="text/x-dot-template">
    {{ for (var i = 0; i < it.length; i++) { }}
        <li id="order_{{=it[i]['id']}}" tapmode onclick="fnToOrderDetail('{{=it[i]["id"]}}','{{=it[i]["type"]}}');">
            <div class="li_box">
                <div class="li_boxt">
                    <div class="info_box">
                        <div class="title">{{=it[i]['name']}}</div>
                        <div class="info">距离{{=formatDistance(it[i]['distance'])}}km | 配送费RM {{=it[i]['delivery_price']}}</div>
                    </div>
                </div>
                <div class="li_boxb">
                    <div class="address_box">
                        <div class="address_boxl">
                            <img src="../image/merchant_address.png">
                        </div>
                        <div class="address_boxr">
                            <div class="address">{{=it[i]['address']}}</div>
                        </div>
                    </div>
                    <div class="address_box">
                        <div class="address_boxl">
                            <img src="../image/client_address.png">
                        </div>
                        <div class="address_boxr">
                            <div class="address">{{=it[i]['area_name2']}}{{=it[i]['address_detail']}}</div>
                            <div class="phone">联系电话：{{=it[i]['tel']}}</div>
                        </div>
                    </div>
                </div>
                <div class="btn_div">
                    <div class="btn_box">
                        <div class="btn contact" tapmode onclick="toCall({{=it[i]['tel']}});">联系</div>
                        <div class="btn route" tapmode onclick="toMap('{{=it[i]['lng']}}','{{=it[i]['lat']}}','{{=it[i]['shop_lng']}}','{{=it[i]['shop_lat']}}');">路线</div>
                        {{if(it[i]['type'] == 1){ }}

                        {{ } else{ }}
                            <div class="btn confirm" tapmode onclick="toConfirm({{=it[i]['id']}});">确认送达</div>
                        {{ }; }}
                    </div>
                </div>
            </div>
        </li>
    {{ }; }}
</script>

<script type="text/javascript">
    
    var p = 1; // 默认第一页
    var canLoad = false; // 默认不可上拉加载更多

    apiready = function(){
        staffData = $api.getStorage('staff_data');
        getOrderList();
        // 下拉刷新
        api.setCustomRefreshHeaderInfo({
            bgColor: '#f8f8f8',
            loadAnimInterval:60,
            image: {
               pull: pullArr,
               load: loadArr
            }
        }, function(ret, err) {
            p = 1;
            canLoad = false;
            getOrderList(1);
        });

        // 上拉加载
        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err){
            if(canLoad == true){
                canLoad = false;
                var _dom = $api.byId('orderC');
                setLoadingData(_dom);
                getOrderList(2);
            }
        });

        api.addEventListener({
            name: 'loginSuccess'
        }, function(ret, err){
            if( ret ){
                staffData = $api.getStorage('staff_data');
                p = 1;
                canLoad = false;
                getOrderList(1);
            }
        });

        // 因为商家扫描了骑手的二维码确认身份，所以表示骑手已经取货成功,需要添加一条大配送订单记录
        api.addEventListener({
            name: 'confirmStaffOrder'
        }, function(ret, err){
            if( ret ){
                p = 1;
                canLoad = false;
                getOrderList(1);
            }
        });

        // 代配送页可以直接把对应id的订单删除就行
        api.addEventListener({
            name: 'orderDeliverySuccess'
        }, function(ret, err){
            if( ret ){
                var oid = ret.value.oid;
                $("#order_"+oid).remove();
                if($("#orderC .li_box").length == 0){
                    var _dom = $api.byId('orderC');
                    setWithoutData(_dom);
                }
            }
        });
    };

    function toMap (lng,lat,shop_lng,shop_lat) {
        api.openWin({
            name: 'map',
            url: './map.html',
            pageParam:{
                user_lng: lng,
                user_lat: lat,
                shop_lng: shop_lng,
                shop_lat: shop_lat,
                status: 4
            }
        });
        event.stopPropagation();
        event.preventDefault();
        return;
    };

    function getOrderList(t) {
        var staffLng = $api.getStorage('staff_lng');
        var staffLat = $api.getStorage('staff_lat');
        api.ajax({
            url: rootPath + '/api/staff/get_order_list_with_status',
            method: 'get',
            cache: true,
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                    p: p,
                    status: 4,
                    lng:staffLng,
                    lat:staffLat
                },
                
            }
        }, function(ret, err) {
            if (ret.status == 200) {
                if(t == 2){
                    appendDotData (ret.data,'orderL','orderC',true);
                }else{
                    setDotData (ret.data,'orderL','orderC',true);
                }
                if(ret.data.length == 10){
                    p++;
                    canLoad = true;
                }else{
                    canLoad = false;
                }
            } else {
                if(p == 1){
                    // 首次获取就无订单
                    var _dom = $api.byId('orderC');
                    setWithoutData(_dom);
                    canLoad = false;
                }
            }
            if(t == 1){
                api.refreshHeaderLoadDone();
            }
            hideLoadingData();
        });
    }

    function fnToOrderDetail (_id,_type) {
        api.openWin({
            name: 'order_detail',
            url: './order_detail.html',
            pageParam: {
                id: _id,
                isPackage: _type
            }
        });
        event.stopPropagation();
        event.preventDefault();
        return;
    };

    // 抢单 
    function grabOrderNow (_id,_this) {
        var _that = $(_this);
        if(_that.hasClass('active')){
            return;
        }
        openLoading();
        api.ajax({
            url: rootPath + '/api/staff/grab_order_now',
            method: 'post',
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                    id: _id
                },
            }
        }, function(ret, err) {
            if (ret.status == 200) {
                _that.addClass('active');
                _that.html('抢单成功');
                api.toast({
                    msg: '抢单成功',
                    location: 'middle'
                });
                closeLoading();
            }else if(ret.status == 205){
                api.toast({
                    msg: ret.msg,
                    location: 'middle'
                });
                _that.parents('li').remove();
                closeLoading();
            } else {
                closeLoading();
            }
        });
    };

    function toCall (_tel) {
        api.call({
            type: 'tel_prompt',
            number: '+'+_tel
        });
        event.stopPropagation();
        event.preventDefault();
        return;
    };

    function toConfirm (_id) {
        // alert(_id);
        api.openWin({
            name: 'scan',
            url: './scan.html'
        });
        event.stopPropagation();
        event.preventDefault();
        return;
    };

</script>
</html>